<template>
  <div class="c-wrapper">
    <div class="bars">
      <div
        v-for="(item, index) in list"
        :key="index"
        class="bar"
        :style="getBarStyle(item, index)"
      ></div>
    </div>
    <div class="value">
      {{ list[level].text || "" }}
    </div>
  </div>
</template>

<script>
export default {
  name: "signal",
  props: {
    list: {
      default: () => [
        {
          text: "A级",
          color: "#02A456",
        },
        {
          text: "B级",
          color: "#4880FF",
        },
        {
          text: "C级",
          color: "#F1B900",
        },
        {
          text: "D级",
          color: "#FF7D36",
        },
        {
          text: "E级",
          color: "#F56C6C",
        },
      ],
    },
    value: {
      type: String,
      default: "A",
    },
  },
  data() {
    return {};
  },
  computed: {
    level() {
      return {
        A: 0,
        B: 1,
        C: 2,
        D: 3,
        E: 4,
      }[this.value||'A'];
    },
  },
  methods: {
    getBarStyle(item, index) {
      const length = this.list.length - 1;
      let height = 50 + (50 / length) * index + "%";
      const color = this.list[this.level].color;
      return {
        background: `linear-gradient(to top,${color} 0, ${color} ${height},transparent ${height}, transparent 100%)`,
      };
    },
  },
};
</script>
<style lang="scss" scoped>
.c-wrapper {
  height: 16px;
  display: flex;
  align-items: center;
  .bars {
    height: 100%;
    display: flex;
    justify-content: space-between;
    .bar {
      flex: 1;
      width: 3px;
      margin-right: 1px;
      &:last-child {
        margin-right: 0;
      }
    }
  }
  .value {
    font-size: 14px;
    margin-left: 8px;
  }
}
</style>
